﻿
@{
    ViewData["Title"] = "Form";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<link href="~/ui/plugins/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet" />
<link href="~/ui/plugins/verUpload/asset/upload.css" rel="stylesheet" />
<div class="container-div white-bg">
    <div class="ibox-content">
        <form class="form-horizontal m" id="myForm">
            <input type="hidden" name="id" id="id" value="@(ViewBag.Id)">
            <div class="form-group">
                <label class="col-sm-3 control-label">上级栏目：</label>
                <div class="col-sm-6">
                    <input id="parentChannel" checks="0" readonly class="form-control"/>
                    <input type="hidden" name="parent_id" id="parent_id" value="0" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">栏目名称：</label>
                <div class="col-sm-6">
                    <input type="text" name="channel_name" id="channel_name" value="" class="form-control" data-rule="required;">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">栏目索引：</label>
                <div class="col-sm-6">
                    <input type="text" name="channel_index" id="channel_index" value="" class="form-control" data-rule="required;">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">链接方式：</label>
                <div class="col-sm-6">
                    <select id="link_type" name="link_type" class="form-control">
                        <option value="0">默认</option>
                        <option value="1">链接到第一篇文章</option>
                        <option value="2">链接到子栏目</option>
                    </select>
                </div>
            </div>
            <div class="form-group" style="display:none;" id="subChannelDiv">
                <label class="col-sm-3 control-label">子栏目：</label>
                <div class="col-sm-6">
                    @Html.DropDownList("sub_channel", ViewBag.SubChannels as SelectList, new { @class = "form-control" });
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">栏目外链：</label>
                <div class="col-sm-6">
                    <input type="text" name="channel_href" id="channel_href" value="" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">栏目图片：</label>
                <div class="col-sm-6">
                    <div class="cupload-upload-box" id="uploader">
                        <span class="cupload-upload-btn">+</span>
                    </div>
                    <ul class="cupload-image-boxs" id="imgList">
                    </ul>
                    <input type="hidden" name="channel_image" id="channel_image" value="" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">导航渲染标识</label>
                <div class="col-sm-4">
                    <div class="checkbox checkbox-success checkbox-inline">
                        <input type="checkbox" id="drawing_enable" name="drawing_enable" value="1" checked>
                        <label for="drawing_enable">渲染</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">排序：</label>
                <div class="col-sm-6">
                    <input type="number" value="1" name="sort_num" id="sort_num" class="form-control" data-rule="required;integer; range[0~1000]">
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="footerbar">
                <div class="col-sm-12 col-sm-offset-4">
                    <button class="btn btn-primary" type="submit">
                        <i class="fa fa-check"></i>
                        保存
                    </button>
                    <button class="btn btn-danger" type="button" onclick="cancel()">
                        <i class="fa fa-reply-all"></i>关闭
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@section scripts{
    <script src="~/ui/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
    <script src="~/ui/easycms/js/multiple-tree-select.js"></script>
    <script src="~/ui/plugins/verUpload/verUpload.js"></script>
    <script>
        $(function () {
            $('#myForm').validator({
                stopOnError: false,
                timely: 2,
                theme: "yellow_right",
                valid: function (form) {
                    // 表单验证通过，提交表单
                    let parentIds = $('#parentChannel_checkedIds').val();
                    $('#parent_id').val(parentIds);
                    jutils.ajaxPost('/Cms/Channel/Save', $(form).serialize(),
                        function (res) {
                            cancel();
                        });
                }
            });

            $('#link_type').on('change', function () {
                var linkType = $(this).val();
                if (linkType == 2) {
                    $('#subChannelDiv').show();
                } else {
                    $('#subChannelDiv').hide();
                }
            })
            loadData();
            initUpload();
        });


        function loadData() {
            var id = jutils.getQueryParam("id");
            jutils.ajaxGet('/Cms/Channel/getmodel', { id: id }, function (res) {
                if (id != '0') {
                    var model = res.data.model
                    $('#myForm').initFormData(model);
                    $('#parentChannel').attr('checks', model.parent_id);
                    if (model.channel_image) {
                        initImage(model.channel_image);
                    }
                }

                initSelectTree(res.data.channels);
            });

        }


        function initSelectTree(treeNodes) {
            var defaults = {

                chkStyle: "radio",
                zNodes: treeNodes,
                height: 333   // 默认自定义下拉框高度
            }

            $("#parentChannel").drawMultipleTree(defaults);
        }


        function initUpload() {
            new verUpload({
                files: "#uploader",
                name: "files",
                load_list: true,
                method: '/api/upload/Uploadimg',
                success: function (d) {
                    var res = JSON.parse(d);
                    if (res.status) {
                        initImage(res.data.url);

                    } else {
                        jutils.error("图片上传失败");
                    }
                },
                fail: function (d) {
                    // $('#sale_image').val('');
                    jutils.error("图片上传失败!");
                },
                size: 1024 * 4,
                ext: ['jpg', 'jpeg', 'png', 'gif']
            });

        }

        function initImage(imgUrl) {

            $('#channel_image').val(imgUrl);
            var imgHtml = '<li class="cupload-image-box" style="position:relative;width: 300px;">';
            imgHtml += '<img class="cupload-image-preview" src = "' + imgUrl + '" style="width: 300px;"/>';
            imgHtml += '<div class="cupload-image-delete" onclick="deletImage(this)" data-url="' + imgUrl + '">x</div>';
            imgHtml += '</li>';
            $('#imgList').append(imgHtml);
            $('#uploader').hide();
            $('#imgList').show();

        }

        function deletImage(obj) {
            var url = $(obj).data('url');
            $imgli = $(obj).parent('li');
            jutils.confirm('确认删除图片吗?', function () {
                $('#channel_image').val('');
                $imgli.remove();
                $('#imgList').hide();
                $('#uploader').show();
                $('.uploadFilesBox').remove();
            })
        }
        function cancel() {
            jutils.closeDialog();
        }
    </script>
}



